<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title>制定计划</title>
<head>

<link href="../../jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="../../jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../../jquery/bs_pagination/jquery.bs_pagination.min.css">
<script type="text/javascript" src="../../jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="../../jquery/bs_pagination/en.js"></script>
<script type="application/javascript" src="../../jquery/commons/common.js"></script>
<link href="../../jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
<script type="text/javascript" src="../../jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">

    $(function(){

        //时间组件
        $(".time").datetimepicker({
            minView: "month",
            language:  'zh-CN',
            format: 'yyyy-mm-dd',
            autoclose: true,
            todayBtn: true,
            pickerPosition: "bottom-left"
        });


        //因为动态生成的元素，是不能够以普通绑定事件的形式来进行操作的
        $("#makePlanBody").on("click",$("input[name=xz]"),function () {

            $("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);

        });

        //为全选的复选框绑定事件，触发全选操作
        $("#qx").click(function () {

            $("input[name=xz]").prop("checked",this.checked);

        });

        //跳转到执行计划页面
        $("#executePlanBtn").click(function () {
            window.location.href = 'workbench/marketing/execute.jsp?chcId=' + $("#create-chcId").val();
        });

        //删除当前机会按钮，删除成功回到客户开发计划主页面
        $("#deleteSalChanceBtn").click(function () {
            $.ajax({
                url:"marketing/delete",
                type:"post",
                data:{
                    "chcId":$("#create-chcId").val()
                },
                dataType:"json",
                success:function (data) {
                    if (data.success){
                        window.location.href='workbench/marketing/develop.jsp';
                    }else {
                        alert("删除当前销售计划失败！");
                    }
                }
            });
        });

        //创建计划
        $("#createBtn").click(function () {
            $.ajax({
                url : "makeplan/save",
                data : {
                    "plaChcId": $.trim($("#create-chcId").val()),
                    "plaDate": $.trim($("#create-plaDate").val()),
                    "plaTodo": $.trim( $("#create-plaTodo").val())
                },
                type : "post",
                dataType : "json",
                success : function (data) {
                    if(data.success){
                        //保存客户成功之后，会进行一次页面刷新，刷新出保存的用户，根据创建时间来进行排序
                        pageList(1,$("#makePlanPage").bs_pagination('getOption', 'rowsPerPage'));
                        $("#marketingMakePlanForm")[0].reset();
                        //关闭添加操作的模态窗口
                        $("#marketingMakePlanModal").modal("hide");
                    }else{
                        alert("添加计划失败");
                    }
                }
            })

        });

        //删除计划
        $("#deleteBtn").click(function () {
            var $xz = $("input[name=xz]:checked");
            if($xz.length==0){
                alert("请选择需要删除的记录");
                //肯定选了，而且有可能是1条，有可能是多条
            }else{
                if(confirm("确定删除所选中的记录吗？")){
                    //url:workbench/activity/delete.do?id=xxx&id=xxx&id=xxx
                    //拼接参数
                    var param = "";
                    //将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
                    for(var i=0;i<$xz.length;i++){
                        param += "plaId="+$($xz[i]).val();
                        //如果不是最后一个元素，需要在后面追加一个&符
                        if(i<$xz.length-1){
                            param += "&";
                        }
                    }
                    $.ajax({
                        url : "makeplan/delete",
                        data : param,
                        type : "post",
                        dataType : "json",
                        success : function (data) {
                            if(data.success){
                                //删除计划成功之后，会进行一次页面刷新，刷新出保存的用户，根据创建时间来进行排序
                                pageList(1,$("#makePlanPage").bs_pagination('getOption', 'rowsPerPage'));
                            }else{
                                alert("删除计划失败");
                            }
                        }
                    })
                }
            }
        });

        //进入客户管理页面，我们需要进行一次分页查询
        pageList(1,2);
        //用来处理分页请求
        function pageList(pageNo,pageSize) {
            $.ajax({

                    url: "/makeplan/"+pageNo+"/"+pageSize+"/"+getQueryString("chcId"),
                    type: "get",
                    dataType: "json",
                    success: function (data) {

                        var html = "";

                        $.each(data.dataList, function (i, n) {
                            html += '<tr class="active">';
                            html += '<td><input type="checkbox" name="xz" value="'+n.plaId+'"/></td>';
                            html += '<td>'+new Date(n.plaDate).format("yyyy-MM-dd")+'</td>';
                            html += '<td>'+n.plaTodo+'</td>';
                            html += '</tr>';

                        });
                        $("#makePlanBody").html(html);

                        //给创建保存计划赋值销售机会的Id
                        $("#create-chcId").val(data.salChance.chcId);
                        $("#makePlanChcSource").    html(data.salChance.chcSource);
                        $("#makePlanChcCreateBy").  html(data.salChance.chcCreateBy);
                        $("#makePlanChcCreateDate").html(new Date(data.salChance.chcCreateDate).format("yyyy-MM-dd"));
                        $("#makePlanChcDueDate").   html(new Date(data.salChance.chcDueDate).format("yyyy-MM-dd"));
                        $("#makePlanChcCustName").  html(data.salChance.chcCustName);
                        $("#makePlanChcDesc").      html(data.salChance.chcDesc);
                        $("#makePlanChcLinkman").   html(data.salChance.chcLinkman);
                        $("#makePlanChcRate").      html(data.salChance.chcRate);
                        $("#makePlanChcTel").       html(data.salChance.chcTel);
                        $("#makePlanChcTitle").     html(data.salChance.chcTitle);
                        $("#makePlanChcDueTo").     html(data.salChance.chcDueTo);

                        //计算总页数
                        var totalPages = data.total%pageSize==0?data.total/pageSize:parseInt(data.total/pageSize)+1;
                        //数据处理完毕后，结合分页查询，对前端展现分页信息
                        $("#makePlanPage").bs_pagination({
                            currentPage: pageNo, // 页码
                            rowsPerPage: pageSize, // 每页显示的记录条数
                            maxRowsPerPage: 20, // 每页最多显示的记录条数
                            totalPages: totalPages, // 总页数
                            totalRows: data.total, // 总记录条数

                            visiblePageLinks: 3, // 显示几个卡片

                            showGoToPage: true,
                            showRowsPerPage: true,
                            showRowsInfo: true,
                            showRowsDefaultInfo: true,

                            //该回调函数时在，点击分页组件的时候触发的
                            onChangePage: function (event, data) {
                                pageList(data.currentPage, data.rowsPerPage);
                            }
                        });

                    }
                }
            )}

        Date.prototype.format = function(fmt) {
            var o = {
                "M+" : this.getMonth() + 1, // 月份
                "d+" : this.getDate(), // 日
                "h+" : this.getHours(), // 小时
                "m+" : this.getMinutes(), // 分
                "s+" : this.getSeconds(), // 秒
                "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
                "S" : this.getMilliseconds()
                // 毫秒
            };
            if (/(y+)/.test(fmt))
                fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
                    .substr(4 - RegExp.$1.length));
            for ( var k in o)
                if (new RegExp("(" + k + ")").test(fmt))
                    fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                        : (("00" + o[k]).substr(("" + o[k]).length)));
            return fmt;
        }


    });

</script>

<body>
<!-- 返回按钮 -->
<div style="position: relative; top: 35px; left: 10px;">
    <a href="javascript:void(0);" onclick="window.history.back();"><span class="glyphicon glyphicon-arrow-left" style="font-size: 20px; color: #DDDDDD"></span></a>
</div>

<!-- 大标题 -->
<div style="position: relative; left: 40px; top: -30px;">
    <div class="page-header">
        <h3>销售机会--制定计划</h3>
    </div>
    <div style="position: relative; height: 50px; width: 250px;  top: -72px; left: 700px;">
        <button type="button" class="btn btn-default" id="executePlanBtn"><span class="glyphicon glyphicon-edit"></span> 执行计划</button>
        <shiro:hasPermission name="sell:salChanceDelete">
        <button type="button" class="btn btn-danger" id="deleteSalChanceBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
        </shiro:hasPermission>
        </div>
</div>

<!-- 销售机会信息 -->
<div style="position: relative; top: -70px;">
    <div style="position: relative; left: 40px; height: 30px;">
        <div style="width: 300px; color: gray;">机会来源</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;" id="makePlanChcSource"><b></b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">客户名称</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;" id="makePlanChcCustName"><b></b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>

	<div style="position: relative; left: 40px; height: 30px; top: 10px;">
        <div style="width: 300px; color: gray;">机会创建人</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;" id="makePlanChcCreateBy"><b></b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">处理人（经理/主管）</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;" id="makePlanChcDueTo"><b></b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>

    <div style="position: relative; left: 40px; height: 30px; top: 10px;">
        <div style="width: 300px; color: gray;">创建时间</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;" id="makePlanChcCreateDate"><b></b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">处理时间</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;" id="makePlanChcDueDate"><b></b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>

    <div style="position: relative; left: 40px; height: 30px; top: 20px;">
        <div style="width: 300px; color: gray;">成功率</div>
        <div style="width: 300px;position: relative; left: 200px; top: -20px;" id="makePlanChcRate"><b></b></div>
        <div style="width: 300px;position: relative; left: 450px; top: -40px; color: gray;">机会概要</div>
        <div style="width: 300px;position: relative; left: 650px; top: -60px;" id="makePlanChcTitle"><b></b></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px;"></div>
        <div style="height: 1px; width: 400px; background: #D5D5D5; position: relative; top: -60px; left: 450px;"></div>
    </div>

    <div style="position: relative; left: 40px; height: 30px; top: 30px;">
        <div style="width: 300px; color: gray;">联系人</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;" id="makePlanChcLinkman"><b>&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">2017-01-18 10:10:10</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 40px;">
        <div style="width: 300px; color: gray;">联系电话</div>
        <div style="width: 500px;position: relative; left: 200px; top: -20px;" id="makePlanChcTel"><b>&nbsp;&nbsp;</b><small style="font-size: 10px; color: gray;">2017-01-19 10:10:10</small></div>
        <div style="height: 1px; width: 550px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <div style="position: relative; left: 40px; height: 30px; top: 50px;">
        <div style="width: 300px; color: gray;">机会描述</div>
        <div style="width: 630px;position: relative; left: 200px; top: -20px;" id="makePlanChcDesc">
            <b>

            </b>
        </div>
        <div style="height: 1px; width: 850px; background: #D5D5D5; position: relative; top: -20px;"></div>
    </div>
    <br/><br/><br/><br/><br/><br/>

    <%--制定计划和执行计划的隐藏域--%>
    <input type="hidden" id="create-chcId"/>

    <!-- 为销售机会创建计划的模态窗口 -->
    <div class="modal fade" id="marketingMakePlanModal" role="dialog">
        <div class="modal-dialog" role="document" style="width: 85%;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span aria-hidden="true">×</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel1">创建计划</h4>
                </div>
                <div class="modal-body">
                    <form id="marketingMakePlanForm" class="form-horizontal" role="form">

                        <div class="form-group">
                            <label for="create-plaDate" class="col-sm-2 control-label">日期<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control time" id="create-plaDate" placeholder="需要加日历控件">
                            </div>

                            <label for="create-plaTodo" class="col-sm-2 control-label">计划项<span style="font-size: 15px; color: red;">*</span></label>
                            <div class="col-sm-10" style="width: 300px;">
                                <input type="text" class="form-control" id="create-plaTodo">
                            </div>
                        </div>
                    </form>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id="createBtn">保存</button>
                </div>
            </div>
        </div>
    </div>


    <div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">

        <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

            <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
                <div class="btn-group" style="position: relative; top: 18%;">
                    <button type="button" class="btn btn-default" data-toggle="modal" data-target="#marketingMakePlanModal" id="createOpenBtn" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
                    <button type="button" class="btn btn-danger"  id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
                </div>
            </div>

            <div style="position: relative;top: 10px;">
                <table class="table table-hover">
                    <thead>
                    <tr style="color: #B3B3B3;">
                        <td><input type="checkbox" id="qx" /></td>
                        <td>日期</td>
                        <td>计划项</td>
                    </tr>
                    </thead>
                    <tbody id="makePlanBody">
                    </tbody>
                </table>
            </div>

            <div style="height: 50px; position: relative;top: 30px;">
                <div id="makePlanPage"></div>
            </div>

        </div>

    </div>
</div>
</body>
</html>
